<template>
  <van-popup
    v-model:show="showProvince"
    :position="position"
    closeable
    :close-icon="iconClose"
    @click-close-icon="onClickCloseIcon"
    @opened="onOpened"
    @closed="onCloseProvince"
    round
  >
    <div class="popup-container">
      <div class="title-container">
        <div class="title-text">请选择高考省份</div>
      </div>
      <div class="grid-container">
        <div
          :class="[
            'grid-item',
            item.name === selectProvince.name ? 'active' : ''
          ]"
          v-for="(item, index) in provinces"
          :key="index"
          @click="onClickItem(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="bottom-btn">
        <div class="right-btn" @click="onConfirmProvince">确 定</div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import iconClose from '@/assets/images/closeBtn.png';

const showProvince = ref(true);
const gridMargin = ref(10);
const columnNum = ref(3);
const position = ref('center');

const emit = defineEmits(['onProvinceSelect', 'onCloseProvince']);
const props = defineProps({
  selectProvinceObj: {
    type: Object,
    require: false
  },
  provinces: {
    type: Array,
    require: true
  }
});

const selectProvince = ref(props.selectProvinceObj);

const onOpened = () => {};

const onClosed = () => {};

const onClickCloseIcon = () => {};

const onClickItem = (item) => {
  selectProvince.value = item;
};

const onConfirmProvince = () => {
  emit('onProvinceSelect', selectProvince.value);
};

const onCloseProvince = () => {
  emit('onCloseProvince');
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.popup-container {
  width: 800px;
}
.title-container {
  padding: 38px 0 30px 36px;
  display: flex;
  justify-content: space-between;

  .title-text {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 34px;
    color: #222222;
    line-height: 26px;
    text-align: left;
    font-style: normal;
  }
}

.grid-container {
  padding: 24px 36px 180px 36px;
  height: 360px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  .grid-item {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 30px;
    color: #333333;
    border: 1px solid transparent;
    background: #f8f8f8;
    &.active {
      color: $primary-color;
      background: #ffffff;
      border: $primary-color 1px solid;
    }
  }
}

.bottom-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: #ffffff;
  box-shadow: 0px -2px 4px 0px rgba(188, 188, 188, 0.5);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
  z-index: 2;

  .left-btn,
  .right-btn {
    flex-shrink: 0;
    width: 98%;
    height: 72px;
    background: #f8f8f8;
    border-radius: 6px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 24px;
    color: #999999;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .left-btn {
    background: #f8f8f8;
    border: 1px solid #f8f8f8;
    &.active {
      border: 1px solid $primary-color;
      color: $primary-color;
    }
  }
  .right-btn {
    color: #ffffff;
    background: $primary-color;
  }
}

:deep(.van-grid-item__content) {
  border-radius: 0px;
  border: 0px solid $active-color;
  padding: 0;
  background: transparent;
}
</style>
